<script setup>
import { defineProps, computed, watch } from 'vue'

const props = defineProps({
  // 类型 原价 现价
  type: {
    type: String,
    default: 'now'
  },
  // 金额
  price: {
    type: Number,
    required: true
  },
  // 符号大小
  symbolSize: {
    type: String,
    default: '24rpx'
  },
  // 整数部分大小
  integerSize: {
    type: String,
    default: '32rpx'
  },
  // 小数部分大小
  decimalSize: {
    type: String,
    default: '24rpx'
  },
  // 原价金额大小
  originalPriceSize: {
    type: String,
    default: '22rpx'
  },
  isWhite: {
    type: Boolean,
    default: false
  }
})

// 格式化
const toFixedPrice = computed(() => {
  return props.price.toFixed(2)
})

// 获取价的整数部分
const integerPart = computed(() => {
  return +String(toFixedPrice.value).split('.')[0]
})

// 获取价的小数部分
const decimalPart = computed(() => {
  return +String(toFixedPrice.value).split('.')[1]
})
</script>

<template>
  <!-- 展示金额组件 -->
  <view class="price flex">
    <!-- 现价 -->
    <view
      :class="[isWhite ? 'c-f' : 'c-primary', 'tb']"
      v-if="type === 'now'"
    >
      <!-- 符号 -->
      <text :style="{ fontSize: symbolSize }">￥</text>
      <!-- 整数部分 -->
      <text :style="{ fontSize: integerSize }">{{ integerPart }}.</text>
      <!-- 小数部分 -->
      <text :style="{ fontSize: decimalSize }">{{ decimalPart }}</text>
    </view>

    <!-- 原价 -->
    <view
      class="m-l-15 f-col-end"
      v-if="type === 'original'"
      :class="[isWhite ? 'c-f' : 'c-9']"
    >
      <text
        class="line-through"
        :style="{ fontSize: props.price }"
      >
        ￥{{ props.price.toFixed(2) }}
      </text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.price {
  font-family: 'WeChatSans Std', serif;
  font-weight: 500;
}
</style>